import 'dart:developer';

import 'package:flutter/material.dart';

/// 有bug，下面控件不更新
class BottomNavigationBarDemo extends StatefulWidget {
  const BottomNavigationBarDemo({Key? key}) : super(key: key);

  @override
  _BottomNavigationBarDemoState createState() =>
      _BottomNavigationBarDemoState();
}

class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primaryColor: Colors.yellow),
      home: SampleBottomNavBarsDemo(),
    );
  }
}

class SampleBottomNavBarsDemo extends StatefulWidget {
  const SampleBottomNavBarsDemo({Key? key}) : super(key: key);

  @override
  _SampleBottomNavBarsDemoState createState() =>
      _SampleBottomNavBarsDemoState();
}

class _SampleBottomNavBarsDemoState extends State<SampleBottomNavBarsDemo>
    with SingleTickerProviderStateMixin {
  TabController? _tabController;

  List<Tab> tabs = <Tab>[
    Tab(
      // text: 'Zeroth',
      icon: Icon(Icons.style),
    ),
    Tab(
        // text: 'First',
        icon: Icon(Icons.star)),
    Tab(
        // text: 'Second',
        icon: Icon(Icons.bolt)),
  ];

  List<String> titles = <String>["Zeroth", "First", "Second"];
  List<Tab> bottomMenus = <Tab>[];
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(length: tabs.length, vsync: this)
      ..addListener(() {
        // 监听切换
        if (_tabController!.index.toDouble() ==
            _tabController!.animation!.value) {
          setState(() {
            _currentIndex = _tabController!.index;
          });
        }
      });

    for (int i = 0; i < titles.length; i++) {
      bottomMenus.add(Tab(
        text: titles[i],
        icon: tabs[i].icon,
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0.0,
        title: Text(
          "bottomNavigationBar Demo",
          style: TextStyle(
              color: Colors.cyan,
              fontWeight: FontWeight.w300,
              letterSpacing: 3.0),
        ),
        centerTitle: true,
        bottom: buildTabBar(),
      ),
      // body: TabBarView(children: tabs,controller: _tabController,),
      body: buildTabBarView(),
      bottomNavigationBar: buildBottomNavigationBar(),
    );
  }

  DefaultTabController buildDefaultTabController() {
    return DefaultTabController(
        length: tabs.length,
        child: Builder(
          builder: (context) {
            return Scaffold(
              appBar: AppBar(
                elevation: 0.0,
                title: Text(
                  "B Demo",
                  style: TextStyle(
                      color: Colors.cyan,
                      fontWeight: FontWeight.w300,
                      letterSpacing: 3.0),
                ),
                centerTitle: true,
                bottom: buildTabBar(),
              ),
              // body: TabBarView(children: tabs,controller: _tabController,),
              body: buildTabBarView(),
              bottomNavigationBar: buildBottomNavigationBar(),
            );
          },
        ));
  }

  BottomNavigationBar buildBottomNavigationBar() {
    return BottomNavigationBar(
      selectedItemColor: Colors.cyan,
      unselectedItemColor: Colors.blueGrey,
      elevation: 0.0,
      onTap: (index) {
        log("onTap: $index");
        setState(() {
          _currentIndex = index;
          _tabController!.index = _currentIndex;
          _tabController!.notifyListeners();
        });
      },
      currentIndex: _currentIndex,
      items: bottomMenus.map((e) {
        return BottomNavigationBarItem(icon: e.icon!, title: Text(e.text!));
      }).toList(),
    );
  }

  TabBar buildTabBar() {
    return TabBar(
      indicatorColor: Colors.transparent,
      labelColor: Colors.cyan,
      unselectedLabelColor: Colors.blueGrey,
      tabs: tabs,
      controller: _tabController,
    );
  }

  TabBarView buildTabBarView() {
    return TabBarView(
      children: titles.map((e) {
        return Center(
          child: Text(
            "${e.toUpperCase()}",
            style: TextStyle(fontSize: 36),
          ),
        );
      }).toList(),
      controller: _tabController,
    );
  }
}
